<template>
  <div id="app" class="content">
    <div class="main-container">
      <open-header :no-user="true"></open-header>
      <div class="open-body">
        <div class="login-banner">
          <div class="container">
            <login :user-api="userApi" @login="onLogin"></login>
          </div>
        </div>
        <div class="container">
          <notice :list="notices"></notice>
        </div>
      </div>
    </div>
    <open-footer></open-footer>
  </div>
</template>

<script>
  import Header from 'open-vue-components/src/components/layout/Header'
  import Footer from 'open-vue-components/src/components/layout/Footer'
  import Notice from 'components/Notice';
  import Login from 'open-vue-components/src/components/common/Login';
  import { fetch, conf } from 'utils/api';
  import '../../utils/filter';

  export default {
    name: 'LoginApp',
    data(){
      return {
        notices: [],
        userApi: conf.userInfo
      };
    },
    methods: {
      onLogin(){
        location.href = '/index.html';
      }
    },
    created(){
      fetch('noticeList').then((res) =>{
        if (!res.data || res.data.length === 0) {
          this.notices = [{
            dbCreateTime: 1479859200000,
            dbUpdateTime: 1479859200000,
            id: 1,
            title: '欢迎入驻网易公开课自媒体平台',
            url: 'http://open.163.com/special/open_mp_welcome/'
          }];
        } else {
          this.notices = res.data;
        }
      });
    },
    components: {
      'open-header': Header,
      'open-footer': Footer,
      'notice': Notice,
      'login': Login
    }
  };

</script>

<style lang="less">
  @import '../../style/common/reset.less';

  html, body {
    height: 100%;
  }

  body {
    min-width: 1200px;
  }

  .container {
    width: 1180px;
    margin: 0 auto;
  }
  .header{
    .logo{
      width: 393px;
      background: url(../../assets/logo.png) left center no-repeat;
    }
  }
  .login-banner {
    height: 418px;
    background: #364657 url("../../assets/login_banner.jpg") center no-repeat;
  }

  .content {
    height: 100%;

    .main-container {
      box-sizing: border-box;
      min-height: 100%;
      padding-bottom: 125px;
    }
    .footer {
      box-sizing: border-box;
      margin-top: -125px;
      height: 125px;
    }
    .login_container {
      float: right;
      width: 400px;
      height: 325px;
      margin-top: 40px;
    }
  }
</style>
